<template>
	<!-- 首页 -->
	<view class="content" id="content">
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" @scroll='scroll1'
			@scrolltolower="touchBottom">
			<!-- 顶部搜索框 -->
			<view class="search">
				<view class="location">
					<image src="/static/img/homePagePic_slices/Group253@2x.png" mode="scaleToFill"></image>
					{{city}}
				</view>
				<!-- <input id="input" placeholder="搜索框" @click="toSearch()"> -->
				<view class="input" @click="toSearch()">
					<span>搜索</span>
				</view>
				<view class="submit">
					<image src="/static/img/homePagePic_slices/search.png" mode="scaleToFill"></image>
				</view>
				<view class="notice">
					<image src="/static/img/homePagePic_slices/Frame@2x.png" mode="scaleToFill"></image>
				</view>
			</view>

			<!-- 主页面 -->
			<view class="main">
				<!-- 第一层：高薪兼职，宅家兼职。。。 -->
				<view class="MainTop">
					<view class="MainTop-child" @click="toFrim">
						<image src="/static/img/homePagePic_slices/Group218@2x.png" mode="scaleToFill"></image>高薪兼职
					</view>
					<view class="MainTop-child">
						<image src="/static/img/homePagePic_slices/Group222@2x.png" mode="scaleToFill"></image>宅家兼职
					</view>
					<view class="MainTop-child">
						<image src="/static/img/homePagePic_slices/Group220@2x.png" mode="scaleToFill"></image>靠谱兼职
					</view>
					<view class="MainTop-child">
						<image src="/static/img/homePagePic_slices/Group364@2x.png" mode="scaleToFill"></image>热门兼职
					</view>
					<view class="MainTop-child">
						<image src="/static/img/homePagePic_slices/Group223@2x.png" mode="scaleToFill"></image>附近兼职
					</view>
				</view>
				<!-- 第二层 -->
				<view class="MainSecond">
					<view class="left">
						<image :src="navPicOne" mode="scaleToFill"></image>
					</view>
					<view class="right">
						<!-- <img src="/static/img/homePagePic_slices/Group468@2x.png" alt="">
						<img src="/static/img/homePagePic_slices/Group467@2x.png" alt=""> -->
						<image :src="navPicTwo" mode="scaleToFill"></image>
						<image :src="navPicThree" mode="scaleToFill"></image>
					</view>
				</view>
				<!-- Tab栏：精选职位，在家可做。。。 -->
				<!-- <u-sticky bgColor="#F3F7F8">
					<u-tabs :list="list1"
					lineWidth="30"
					lineColor="#08C8BD"
					:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
					}" 	@click="TabsClick"></u-tabs>
				</u-sticky> -->
				<view class="tabs" :style="tabsSticky?'background:#F3F7F8':''">
					<my-tabs :tabsList="['精选职位','在家可做','日结兼职','在线兼职']" fontSize="24rpx" @typeChange="typeChange(index)">
					</my-tabs>
				</view>

				<!-- 默认，最近，离我近 -->
				<view class="tag">
					<view class="childBox" v-for="item,index in tagList" :key="index"
						:style="index===curTag?'border: 1px solid #08C8BD;color: #08C8BD;':''"
						@click="tagChange(index)">
						{{item.sortName}}
					</view>
					<view class="childBox" @click="show=1">
						筛选
					</view>
				</view>

				<!-- 职位卡片 -->
				<Jobcard v-for="item,index in jobList" :key="index" :jobInfo="item"></Jobcard>

			</view>
		</scroll-view>



		<!-- 筛选弹出层 -->
		<view class="" @touchmove.stop.prevent="() => {}">
			<!-- 筛选弹出层1 -->
			<u-popup :show="show===1" :round="10" mode="bottom" @close="close" :closeable='true'>
				<view class="select">
					<!-- 顶部文本 -->
					<view class="selectTop">
						<span>筛选</span>
						<!-- <img @click="close" src="/static/img/close@2x.png" alt=""> -->
					</view>

					<!-- 滑动选择区 -->
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="leixing">
							<span>岗位类型</span>
							<view class="quanbu" @click="show=2">
								<span>全部</span>
								<span>{{'>'}}</span>
							</view>
						</view>
						<view class="diqu">
							<span>地区</span>
							<view class="" style="display: flex;flex-wrap: wrap;">
								<view class="Tag" v-for="(item ,index) in select.diqu" :key="index"
									:style="diquIndex===index?'color:#08C8BD;background-color:#F3F7F8;border:1px solid #08C8BD;':'color:#001A18;background-color:#fff;border:1px solid #F3F7F8;'"
									@click="diquClick(index)">

									<span>{{item}}</span>
								</view>
							</view>
						</view>
						<view class="fangshi">
							<span>结算方式</span>
							<view class="" style="display: flex;flex-wrap: wrap;">
								<view class="Tag" v-for="item ,index in select.fangshi" :key="index"
									:class="fangshiIndex===index?'selectedBox':''"
									:style="fangshiIndex===index?'color:#08C8BD;background-color:#F3F7F8;border:1px solid #08C8BD;':'color:#001A18;background-color:#fff;border:1px solid #F3F7F8;'"
									@click="fangshiClick(index)">

									<span>{{item}}</span>
								</view>
							</view>
						</view>
						<view class="xingbie">
							<span>性别</span>
							<view class="" style="display: flex;flex-wrap: wrap;">
								<view class="Tag" v-for="item ,index in select.xingbie" :key="index"
									:style="xingbieIndex===index?'color:#08C8BD;background-color:#F3F7F8;border:1px solid #08C8BD;':'color:#001A18;background-color:#fff;border:1px solid #F3F7F8;'"
									@click="xingbieClick(index)">

									<span>{{item}}</span>
								</view>
							</view>
						</view>
					</scroll-view>


					<!-- 底部重置/确定按钮 -->
					<view class="ending">
						<view class="chongzhi" @click="reset1">
							重置
						</view>
						<view class="queding" @click="confirmFilter">
							确定
						</view>
					</view>
				</view>
			</u-popup>


			<!-- 筛选弹出层2 -->
			<u-popup class="popup" :show="show===2" :round="10" mode="bottom" @close="close" :closeable='true'>

				<!-- 顶部文本 -->
				<view class="select">
					<view class="selectTop">
						<span>筛选</span>
						<!-- <img @click="close" src="/static/img/close@2x.png" alt=""> -->
					</view>
				</view>

				<!-- 选择区域 -->
				<view class="container">

					<!-- 左边滑动区域 -->
					<view class="left">
						<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar='true'>
							<view class="leftBox" v-for="item,index in list" :key="index" @click="leftClick(index)"
								:style="leftIndex===index?'background-color:#FFFFFF;border-left: 6rpx solid #00D3C7;':''">
								<span>{{item.type}}</span>
							</view>
						</scroll-view>
					</view>

					<!-- 右边滑动区域 -->
					<view class="right">
						<scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll2" scroll-with-animation="true"
							:show-scrollbar='true' :scroll-top="scrollViewTop">
							<view class="rightBox" v-for="v,i in list" :key="i" style="margin-bottom: 20rpx;">
								<view class="rightBox1">
									<span>{{v.type}}</span>
								</view>
								<view class="rightBox2">
									<view class="rightBoxChild" v-for="item,index in list[i].list" :key="index"
										@click="rightClick(v.type,i,index)"
										:style="rightIndex===index&&list[i].type==rightName?'border:1px solid #00D3C7;color:#00D3C7;':''">
										<span>{{item}}</span>
									</view>
								</view>
							</view>
							<view class="" style="height: 200rpx;">

							</view>
						</scroll-view>
					</view>

					<!-- 底部重置/确定按钮 -->
					<view class="ending">
						<view class="chongzhi" @click="reset2">
							重置
						</view>
						<view class="queding">
							确定
						</view>
					</view>
				</view>
			</u-popup>
		</view>

	</view>

</template>

<script>
	import Jobcard from '@/components/jobCard.vue'
	import myTabs from '@/components/tabs.vue'
	//#ifdef H5
	import AMapLoader from '@amap/amap-jsapi-loader';
	//#endif
	// #ifdef MP-WEIXIN || MP-ALIPAY
	import amapFile from '@/common/amap-wx.130.js'
	// #endif

	export default {
		data() {
			return {
				city: '',
				scrollHeight: 0, //滚动窗口的高度
				tabsSticky: false, //tabs是否吸顶
				diquIndex: 0,
				fangshiIndex: 0,
				xingbieIndex: 0,
				gongzuozhouqiIndex: 0,
				// list1:[{
				//                 name: '精选职位',
				//             }, {
				//                 name: '在家可做',
				//             }, {
				//                 name: '日结兼职'
				//             }, {
				//                 name: '在线兼职'
				//             }],


				navPicOne: '',
				navPicTwo: '',
				navPicThree: '',

				tagList: [],
				curTag: 0, //标签对索引

				type: 0, //0-精选职位 1-在家可做 2-日结兼职 3-在线兼职

				startPage: 0, //职位列表分页

				jobList: [],
				show: 0,
				select: {
					diqu: ['不限', '东莞'],
					fangshi: [
						'面议',
						'日结',
						'周结',
						'月结',
						'完工结算'
					],
					xingbie: ['不限', '男', '女'],
					gongzuozhouqi: ['不限', '周末节假日', '工作日', '个人安排', '时间范围']
				},



				leftIndex: 0,
				rightName: '',
				rightIndex: '',
				list: [{
					type: '全部岗位',
					list: ['全部']
				}, {
					type: '餐饮服务',
					list: ['收银员', '厨师', '服务员', '厨工/帮厨', '洗碗工', '配菜', '咖啡师']
				}, {
					type: '酒店/旅游',
					list: ['酒店前台', '客房服务员', '酒店管家', '导游', '旅游顾问', '本地游向导']
				}, {
					type: '酒店/旅游2',
					list: ['酒店前台', '客房服务员', '酒店管家', '导游', '旅游顾问', '本地游向导']
				}, {
					type: '酒店/旅游3',
					list: ['酒店前台', '客房服务员', '酒店管家', '导游', '旅游顾问', '本地游向导']
				}, {
					type: '酒店/旅游4',
					list: ['酒店前台', '客房服务员', '酒店管家', '导游', '旅游顾问', '本地游向导']
				}, {
					type: '酒店/旅游5',
					list: ['酒店前台', '客房服务员', '酒店管家', '导游', '旅游顾问', '本地游向导']
				}, {
					type: '酒店/旅游6',
					list: ['酒店前台', '客房服务员', '酒店管家', '导游', '旅游顾问', '本地游向导']
				}, {
					type: '酒店/旅游7',
					list: ['酒店前台', '客房服务员', '酒店管家', '导游', '旅游顾问', '本地游向导']
				}],
				offsetTopList: [],
				scrollViewTop: 0,



			}
		},
		computed: {
			screenConditions() {
				return [{
						screenType: 1, //岗位类型
						screenOption: 0,
					},
					{
						screenType: 2, //地区
						screenOption: this.diquIndex,
					},
					{
						screenType: 3, //结算方式
						screenOption: this.fangshiIndex,
					},
					{
						screenType: 4, //性别要求
						screenOption: this.xingbieIndex,
					},
					{
						screenType: 5, //工作日期
						screenOption: 0,
					}
				]
			}
		},

		components: {
			Jobcard,
			myTabs
		},
		onLoad() {
			// uni.request({
			// 	url:'http://118.178.143.133:8086/app/home',
			// 	data:{
			// 		source:1,
			// 	},
			// 	success:res=>{
			// 		console.log('success',res);
			// 	}
			// })
			//#ifdef H5

			//#endif
			this.$store.dispatch('initDic').then(() => {
				let source = NaN
				//#ifdef H5
				source = 1
				//#endif
				//#ifdef MP-WEIXIN
				source = 2
				//#endif
				//#ifdef MP-ALIPAY
				source = 3
				//#endif
				this.$http.request({
					url: '/app/home',
					data: {
						source: source
					}
				}).then((result) => {
					let res = result.data
					console.log('首屏页面响应结果', res);
					this.navPicOne = res.data.navPicOne
					this.navPicTwo = res.data.navPicTwo
					this.navPicThree = res.data.navPicThree
					this.tagList = res.data.sortTypes

				})



				let postListObj = {
					screenConditions: [],
					sortCondition: this.curTag,
					startPage: 0,
					type: this.type
				}
				console.log('请求参数', postListObj)
				this.$http.request({
					url: '/post/list',
					data: postListObj,

				}).then((result) => {
					let res = result.data
					console.log('职位列表响应结果', res);
					this.jobList = res.data.posts
					//this.jobList=[{},{}]
				})

			});

			//获取定位
			//#ifdef H5
			window._AMapSecurityConfig = {
				securityJsCode: '93ba38295586e71fd86e14b3c5ddfc6b',
			}
			AMapLoader.load({
				"key": "c66caf39ff7fbcf5d3f429715583c37e", // 申请好的Web端开发者Key，首次调用 load 时必填
				"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				"plugins": ['AMap.Geolocation', 'AMap.CitySearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				var that = this
				//获取当前城市
				AMap.plugin('AMap.CitySearch', function() {
					var citySearch = new AMap.CitySearch()
					citySearch.getLocalCity(function(status, result) {
						if (status === 'complete' && result.info === 'OK') {
							console.log('h5获取当前城市', result)
							var reg = new RegExp('市')
							that.city = result.city.replace(reg, '')
							that.select.diqu[1] = result.city.replace(reg, '')
						}
					})
				})
				//获取精确经纬度
				AMap.plugin('AMap.Geolocation', function() {
					var geolocation = new AMap.Geolocation({
						// 是否使用高精度定位，默认：true
						enableHighAccuracy: true,
						// 设置定位超时时间，默认：无穷大
						timeout: 10000,
						// 定位按钮的停靠位置的偏移量
						offset: [10, 20],
						//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
						zoomToAccuracy: true,
						//  定位按钮的排放位置,  RB表示右下
						position: 'RB'
					})

					geolocation.getCurrentPosition(function(status, result) {
						if (status == 'complete') {
							onComplete(result)
						} else {
							onError(result)
						}
					});

					function onComplete(data) {
						// data是具体的定位信息
						console.log('h5获取精确经纬度', data)
						uni.setStorageSync('locationInfo', data.position)
					}

					function onError(data) {
						// 定位出错
						uni.showToast({
							title: '获取定位失败，请确认当前浏览器定位权限是否开启',
							icon: 'none'
						})
					}
				})
			}).catch(e => {
				console.log(e);
			})
			//#endif
			// #ifdef MP-WEIXIN || MP-ALIPAY
			var myAmapFun = new amapFile.AMapWX({
				key: '8782f5104dda82e52ebb71f85886e7df'
			});
			var that = this
			myAmapFun.getRegeo({
				success: function(data) {
					//成功回调
					console.log('小程序定位信息', data)
					var reg = new RegExp('市')
					that.city = data[0].regeocodeData.addressComponent.city.replace(reg, '')
					that.select.diqu[1] = data[0].regeocodeData.addressComponent.city.replace(reg, '')
					uni.setStorageSync('locationInfo', data[0])
				},
				fail: function(info) {
					//失败回调
					console.log(info)
				}
			})
			// #endif
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	//geocode:true,//设置该参数为true可直接获取经纬度及城市信息
			// 	success: res=>{
			// 		console.log(res)
			// 		uni.setStorageSync('locationInfo',res)
			// 	},
			// 	fail: res=>{
			// 		uni.showToast({
			// 			title: '获取地址失败，将导致部分功能不可用',
			// 			icon:'none'
			// 		});
			// 	}
			// });


		},
		mounted() {
			//获取筛选板块距离顶部距离
			this.getOffsetTop()

			//滚动区域高度
			this.scrollHeight = uni.getSystemInfoSync().windowHeight;
			console.log(this.scrollHeight);

			//获取tabs标签栏距离顶部距离，用于吸顶判断
			uni.createSelectorQuery().in(this).select('.tabs').boundingClientRect(data => {
				this.tabsOffsetTop = data.top
			}).exec(() => {
				console.log(this.tabsOffsetTop);
			})


			this.$bus.$on('typeChange', index => {
				console.log(index);

				if (index !== this.type) {
					this.type = index
					this.startPage = 0
					let postListObj = {
						screenConditions: [],
						sortCondition: this.curTag,
						startPage: this.startPage,
						type: this.type
					}
					console.log('请求参数', postListObj);
					this.$http.request({
						url: '/post/list',
						data: postListObj,

					}).then((result) => {
						let res = result.data
						console.log('响应结果', res);
						this.jobList = res.data.posts
					})
				}
			})


		},
		methods: {
			//过滤搜索
			confirmFilter() {
				let postListObj = {
					screenConditions: this.screenConditions,
					sortCondition: this.curTag,
					startPage: 0,
					type: this.type
				}
				console.log(postListObj)
				this.$store.dispatch('initDic').then(() => {
					this.$http.request({
						url: '/post/list',
						data: postListObj,
					}).then((result) => {
						this.close()
						let res = result.data
						console.log('职位列表响应结果', res);
						this.jobList = res.data.posts
					})
				})
			},
			//滑动事件
			scroll1(e) {
				//console.log(e);
				if (e.detail.scrollTop >= this.tabsOffsetTop) {
					this.tabsSticky = true;
				}
			},
			//触底加载
			touchBottom() {
				console.log('触底加载');

			},
			//标签点击
			tagChange(index) {
				if (index !== this.curTag) {
					this.curTag = index;
					this.startPage = 0
					let postListObj = {
						screenConditions: [],
						sortCondition: this.curTag,
						startPage: this.startPage,
						type: 3
					}
					console.log('请求参数', postListObj);
					this.$http.request({
						url: '/post/list',
						data: postListObj,

					}).then((result) => {
						let res = result.data
						console.log('响应结果', res);
						this.jobList = res.data.posts
					})
				}
			},
			//显示筛选弹出层
			selectClick() {
				this.show = 1;
				//this.stop()
			},
			//选择地区
			diquClick(index) {
				this.diquIndex = index
			},
			//选择结算方式
			fangshiClick(index) {
				console.log(index)
				this.fangshiIndex = index
			},
			//选择性别
			xingbieClick(index) {
				this.xingbieIndex = index
			},
			//重置
			reset1() {
				this.diquIndex = 0
				this.fangshiIndex = 0
				this.xingbieIndex = 0
			},
			//关闭弹出层
			close() {
				if (this.show === 2) {
					this.show = 1;
				} else if (this.show === 1) {
					this.show = 0;
					//this.move()
				}
			},

			//获取盒子距离父元素顶部距离
			getOffsetTop() {
				//由于uniapp获取元素位置的API无法兼容所有平台，因此只能自己去测量尺寸并计算
				this.offsetTopList.push(...[0, 82])
				let len = 82;
				for (let i = 1; i < this.list.length; i++) {
					//每个按钮的高度是52，其他的高度是30
					len += Math.ceil(this.list[i].list.length / 2) * 52 + 30;
					this.offsetTopList.push(len);
				}
			},
			scroll2(e) {
				//popup弹出层2的滚动监听
				let offsetTop = e.detail.scrollTop.toFixed(0) * 1
				//console.log(offsetTop)
				//条件绑定,offsetTop在不同范围时改变left盒子的选中
				for (let i = 0; i < this.offsetTopList.length - 1; i++) {
					if (offsetTop >= this.offsetTopList[i] && offsetTop < this.offsetTopList[i + 1]) {
						this.leftIndex = i;
					}
				}
				if (offsetTop >= this.offsetTopList[this.offsetTopList.length - 1]) {
					this.leftIndex = this.offsetTopList.length - 1;
				}
			},
			//点击左边栏
			leftClick(index) {
				this.leftIndex = index;
				this.scrollViewTop = this.offsetTopList[index];
			},
			//点击右边栏
			rightClick(name, i, index) {
				this.rightName = name;
				this.leftIndex = i;
				this.rightIndex = index;
			},
			//重置
			reset2() {
				this.leftClick(0)
				this.rightIndex = -1
			},

			// 前往企业专区
			toFrim() {
				uni.navigateTo({
					url: '/subpageB/common/firm'
				})
			},
			//前往搜索页
			toSearch() {
				console.log("toSearch");
				uni.navigateTo({
					url: '/subpageB/common/search'
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/31791c1b-36c7-42f1-851b-c73a2565e92d.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.content .scroll-YY {
		height: 100vh;
	}

	.search {

		display: flex;
		width: 100%;
		height: 72rpx;
		margin: 60rpx 32rpx 40rpx;


	}

	.search .location {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 15%;
		height: 100%;
		//#ifdef MP-ALIPAY
		//height: 62rpx;		//支付宝小程序要重设高度
		//width: 15%;
		//#endif
		background: #FFFFFF;
		border-radius: 40rpx 0rpx 0rpx 40rpx;

		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #001A18;
	}

	.search .location image {
		width: 24rpx;
		height: 24rpx;
	}

	.search .input {
		display: flex;
		align-items: center;
		width: 380rpx;
		height: 100%;
		background: #FFFFFF;

		>span {
			border-left: 2rpx solid #99A3A3;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #99A3A3;
			line-height: 28rpx;
			padding-left: 16rpx;
		}


	}

	.search .submit {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 106rpx;
		height: 100%;
		background: #FFFFFF;
		border-radius: 0rpx 40rpx 40rpx 0rpx;
	}

	.search .submit image {
		width: 88rpx;
		height: 56rpx;
	}

	.search .notice {
		padding-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 72rpx;
	}

	.search .notice image {
		width: 50rpx;
		height: 52rpx;
	}

	.main {
		width: 100%;
		background: #F3F7F8;
		box-shadow: 0px -1px 12px 0px rgba(0, 49, 128, 0.1000);
		border-radius: 16px 16px 0px 0px;
		opacity: 1;
		padding: 1rpx 0;
	}

	.MainTop {
		display: flex;
	}

	.MainTop .MainTop-child {
		width: 20%;
		text-align: center;
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 800;
		color: #001A18;
		line-height: 14px;
		-webkit-background-clip: text;
	}

	.MainTop .MainTop-child image {
		width: 100%;
		height: 146rpx;

	}

	.MainSecond {
		display: flex;
		align-items: center;
	}

	.MainSecond .left {
		margin: 20rpx 0rpx 10rpx 30rpx;
		width: 334rpx;
		height: 252rpx;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1000);
		border-radius: 16rpx;
		background-color: #001A18;
		border: 1px solid #FFFFFF;

		>image {
			width: 334rpx;
			height: 252rpx;
			border-radius: 16rpx;
		}
	}

	.MainSecond .right {
		margin-top: 20rpx;
	}

	.MainSecond .right image {
		display: block;
		width: 360rpx;
		height: 140rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		opacity: 1;
	}

	.tabs {
		padding: 8rpx 16rpx;
		position: sticky;
		top: -1px;
		z-index: 100;
	}

	.tag {
		width: 100%;
		margin-top: 16rpx;

	}

	.tag .childBox {
		float: left;
		background-color: #FFFFFF;
		margin-left: 20rpx;
		padding: 10rpx 14rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #001A18;
	}

	.tag .childBox:nth-last-of-type(1) {
		float: right;
		margin-right: 32rpx;
		border: 1px solid #08C8BD;
		color: #08C8BD;
	}

	//清除浮动
	.tag::after {
		content: '';
		display: block;
		clear: both;
	}



	.select {
		width: 100%;

	}

	.select .selectTop {
		width: 100%;
		height: 100rpx;
		display: block;
	}

	.select .selectTop span {
		float: left;
		margin-top: 20rpx;
		margin-left: 340rpx;
		font-size: 40rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.select .selectTop image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 30rpx;
		top: 26rpx;
	}

	.select .scroll-Y {
		height: 700rpx;
	}

	.select .leixing>span {
		padding-left: 20rpx;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #001A18;
		line-height: 19px;
	}

	.select .leixing .quanbu {
		position: relative;
		margin: 20rpx;
		width: 93%;
		height: 44px;
		background: #F3F7F8;
		border-radius: 8px 8px 8px 8px;
		opacity: 1;
		display: flex;
		align-items: center;
	}

	.select .leixing .quanbu span {
		padding-left: 30rpx;
	}

	.select .leixing .quanbu span:nth-of-type(2) {
		position: absolute;
		right: 30rpx;
	}

	.select .diqu>span {
		padding-left: 20rpx;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #001A18;
		line-height: 19px;
	}

	.select .Tag {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 216rpx;
		height: 80rpx;
		font-size: 28rpx;
		margin: 20rpx 0 20rpx 20rpx;
		border-radius: 8px 8px 8px 8px;
	}

	.select .fangshi>span {
		padding-left: 20rpx;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #001A18;
		line-height: 19px;
	}

	.select .xingbie>span {
		padding-left: 20rpx;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #001A18;
		line-height: 19px;
	}

	.ending {
		margin: 10rpx;
		padding: 10rpx;
		border-top: 1px solid #eee;
		display: flex;
	}

	.ending .chongzhi {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 284rpx;
		height: 96rpx;
		background: #F3F7F8;
		border-radius: 8px 8px 8px 8px;
	}

	.ending .queding {
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 382rpx;
		height: 96rpx;
		color: #FFFFFF;
		background: #00D3C7;
		border-radius: 8px 8px 8px 8px;
		opacity: 1;
	}

	.container {
		display: flex;
		width: 100%;
		height: 800rpx;
		background-color: #FFFFFF;

		.left {
			display: flex;
			flex-direction: column;

			.scroll-Y {
				height: 672rpx;

				.leftBox {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 216rpx;
					height: 88rpx;
					border-left: 6rpx solid #F3F7F8;
					background-color: #F3F7F8;
					font-size: 16px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #001A18;
				}
			}

		}

		.right {
			width: 534rpx;
			background-color: #FFFFFF;

			.scroll-Y {
				height: 672rpx;
			}

			.rightBox1 {
				margin-left: 40rpx;
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}

			.rightBox2 {
				display: flex;
				flex-wrap: wrap;
				margin-left: 26rpx;
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;

				.rightBoxChild {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 10rpx;
					width: 216rpx;
					height: 80rpx;
					background: #F3F7F8;
					border: 1px solid #F3F7F8;
					border-radius: 8px 8px 8px 8px;
				}
			}
		}

		.ending {
			position: absolute;
			bottom: 1px;
			margin: 10rpx;
			padding: 10rpx;
			border-top: 1px solid #eee;
			display: flex;
			background-color: #FFFFFF;

			.chongzhi {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 284rpx;
				height: 96rpx;
				background: #F3F7F8;
				border-radius: 8px 8px 8px 8px;
			}

			.queding {
				margin-left: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 382rpx;
				height: 96rpx;
				color: #FFFFFF;
				background: #00D3C7;
				border-radius: 8px 8px 8px 8px;
				opacity: 1;
			}
		}
	}
</style>
